<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<title>产品中心--东西互联网</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/muiicon.css" />
    <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="css/default.css" />
</head>
	<body>
			<div class="page">
				<header class="mui-bar mui-bar-nav" >
					 <a href="javascript:history.back();"  class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span> <span class="title">产品中心</span></span>
					</a>
					<h1 class="mui-title" id="cateTitle"> </h1>
					<a	 id="search"	href="#searchCategory"  class="mui-btn mui-btn-link mui-pull-right">筛选</a>
				</header>
				<div class="mui-content">
					<!-- 产品列表  -->
					<div class="mui-row product-list">
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_caibao.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								 </a>
								 <a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_zhenzhu.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								</a>
								<a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_zuanshi.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								</a>
								 <a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_feicui.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								</a>
								<a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_caibao.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								 </a>
								 <a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_zhenzhu.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								</a>
								<a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_zuanshi.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								</a>
								 <a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
						<div class="mui-col-xs-6 mui-col-sm-4">
							<div class="product-item">
								<a href="product_view.html">
									<div class="product-item-body">
										<img src="img/category_feicui.jpg">
										<label>zd00017</label>
									</div>
									<p class="mui-ellipsis-2 product-item-remark">主石:7.5mm 副石:0.225ctx19粒 18k:3.4g</p>
								</a>
								<a class="mui-btn add-to-carts mui-btn-danger">加入购物车</a>
							</div>
						</div>
					</div>
					<!-- end 产品列表  -->
				</div>
			</div>
			
			<style>
					.category-sub-box{margin-top: 10px;border-top: 1px solid rgb(252,242,242));}
					.category-sub-box .category-sub-list{list-style-type:none ;margin: 0 0 10px 0; padding: 3px 0;display: inline-table;}
					.category-sub-list .category-sub-item{float: left; padding: 6px;margin-right: 5px;margin-bottom: 5px; min-width: 60px; text-align: center; border-radius: 5px;font-size: 14px;font-weight: normal;background: #F7F7F7; border: 1px solid rgb(252,242,242);}
					.category-sub-list .category-sub-item a{color: gray;}
					.category-sub-list .category-sub-item.active{background: rgb(224,125,125);}
					.category-sub-list .category-sub-item.active a{color: #fff;}
					.category-sub-box .counter {right: 65px; color: rgb(224,125,125);font-size: 16px;font-weight: bold;}
			</style>
		<nav id="searchCategory" style="width: 90%;">
			<div id="app">
				<h5>产品系列</h5>
				<span  class="mui-icon mui-icon-closeempty mui-pull-right search-category-close"></span>
				 <div class="search-category-list">
	                  <div class="search-category-item" cateid="1" level="1" hasleaf="true"><a href="#">钻 石</a></div>
	                  <div class="search-category-item"  cateid="2" level="1" hasleaf="true"><a href="#" cateid="2">彩 宝</a></div>
	                  <div class="search-category-item"  cateid="3" level="1"  hasleaf="true"><a href="#" >珍 珠</a></div>
	                  <div class="search-category-item"  cateid="4" level="1" hasleaf="true"><a href="#">翡 翠</a></div>
	          	 </div>
				<ul style="clear: both; ">
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-1" class="mm-arrow">钻石大小</a>
						<div id="search-cate1-1" class="Panel">
							<ul class="search-category-sublist">
								<li><span>2ct以上</span></li>
								<li><span>2ct</span></li>
								<li><span>1.5ct</span></li>
								<li><span>1ct</span></li>
								<li><span>0.9ct</span></li>
								<li><span>0.8ct</span></li>
							</ul>
					</div>
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-2" class="mm-arrow">主石大小</a>
						<div id="search-cate1-2" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-3" class="mm-arrow">珍珠大小</a>
						<div id="search-cate1-3" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-4" class="mm-arrow">石头形状</a>
						<div id="search-cate1-4" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-5" class="mm-arrow">款式</a>
						<div id="search-cate1-5" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>戴妃</span></li>
								<li><span>戴妃</span></li>
								<li><span>戴妃</span></li>
							</ul>
						</div>	
					</li>
				</ul>
			</div>
			<a id="btnSearch"  class="mui-btn mui-btn-danger" ><span class="btn mui-icon mui-icon-search"></span>查询</a>
		</nav>	
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.mmenu.min.all.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
		<script>
			 $(function(){
			 	/**
			 	 * 初始化筛选选项
			 	 */
		 		$("#searchCategory").mmenu({
					extensions: ["theme-white","pagedim-black"],//,"fullscreen"
					offCanvas: {
			               position  : "right",
			               zposition : "front"
		           },
					slidingSubmenus:false,
					navbar		: {
						title	: "筛选条件"
					} 
				});
			 	/*选中与取消*/
		 	 	$(".search-category-sublist li").on('click',function(){
		 	 			var m = $(this).parent().parent().parent();
		 	 			if($(this).hasClass("active")){
		 	 				m.find(".mm-counter").text("");
		 	 				$(this).removeClass("active");
		 	 			}else{
		 	 				var text=$(this).find('span').text();
			 	 			m.find(".mm-counter").text(text);
			 	 			$(this).addClass("active");
			 	 			$(this).siblings(".active").removeClass("active");
			 	 			m.find(".mm-arrow").click();
		 	 			}
		 	 	});
		 	 	$("#searchCategory .search-category-close").click(function(){
		 	 		$("#searchCategory").data( "mmenu" ).close();
		 	 	});
		 	 	var pdata = [
 	 				{"cateid":"1-1",name:"女戒",parentid:"1",hasleaf:true,level:"2"},
 	 				{"cateid":"1-2",name:"吊坠",parentid:"1",hasleaf:true,level:"2"},
 	 				{"cateid":"1-3",name:"情侣戒",parentid:"1",hasleaf:false,level:"2"},
 	 				{"cateid":"1-4",name:"男戒",parentid:"1",hasleaf:false,level:"2"},
 	 				{"cateid":"1-5",name:"黄钻",parentid:"1",hasleaf:false,level:"2"},
 	 				{"cateid":"1-6",name:"耳钉",parentid:"1",hasleaf:false,level:"2"},
 	 				{"cateid":"2-1",name:"彩宝1",parentid:"2",hasleaf:true,level:"2"},
 	 				{"cateid":"2-2",name:"彩宝2",parentid:"2",hasleaf:false,level:"2"},
 	 				{"cateid":"2-3",name:"彩宝3",parentid:"2",hasleaf:false,level:"2"},
 					{"cateid":"1-1-1",name:"爪镶",parentid:"1-1",hasleaf:true,level:"3"},
 	 				{"cateid":"1-1-2",name:"爪镶2",parentid:"1-1",hasleaf:false,level:"3"},
 	 				{"cateid":"1-1-3",name:"爪镶3",parentid:"1-1",hasleaf:false,level:"3"},
 	 				{"cateid":"1-1-4",name:"爪镶4",parentid:"1-1",hasleaf:false,level:"3"},
 	 				{"cateid":"1-2-1",name:"包镶",parentid:"1-2",hasleaf:false,level:"3"},
 	 				{"cateid":"1-2-2",name:"包镶2",parentid:"1-2",hasleaf:false,level:"3"},
 	 				{"cateid":"1-2-3",name:"包镶3",parentid:"1-2",hasleaf:false,level:"3"},
 	 				{"cateid":"1-2-4",name:"包镶4",parentid:"1-2",hasleaf:false,level:"3"},
 	 				{"cateid":"2-1-1",name:"彩宝11",parentid:"2-1",hasleaf:false,level:"2"},
 	 				{"cateid":"2-1-2",name:"彩宝12",parentid:"2-1",hasleaf:false,level:"2"},
 	 				{"cateid":"2-1-3",name:"彩宝13",parentid:"2-1",hasleaf:false,level:"2"},
 	 				{"cateid":"1-1-1-1",name:"爪镶11",parentid:"1-1-1",hasleaf:false,level:"4"},
 	 				{"cateid":"1-1-1-2",name:"爪镶12",parentid:"1-1-1",hasleaf:false,level:"4"}
 	 			];
		 	 			
		 	 function getCategory(parentId){
	 	 			var arr = [];
	 	 			$.each(pdata, function(){ 
	 	 				if(this.parentid == parentId){
	 	 					arr.push(this);
	 	 				}
					}); 
	 	 			return arr;
		 	 	}
		 	 	
		 	 	$(".search-category-item").on('click',function(){
		 	 			var m = $(this);
		 	 			clickCategoryItem(m);
		 	 	});
		 	 	
		 	 	function clickCategoryItem(m){
		 	 		var curCateid  = m.attr("cateid"),level=m.attr("level");
		 	 		var searchCategoryProduct = $("#searchCategoryProduct");
		 	 		//清空
		 	 		if(level==1){
		 	 			if(searchCategoryProduct.size()>0){
		 	 				searchCategoryProduct.empty().append(' <h5>产品</h5>');
		 	 			}else{
		 	 				searchCategoryProduct = $('<div>').attr("id","searchCategoryProduct").css("height","auto").append(' <h5>产品</h5>');
		 	 				searchCategoryProduct.insertAfter($(".search-category-list"));
		 	 			}
		 	 		}else if(level>1){
		 	 			m.parent().parent().nextAll().remove();
		 	 		}
		 	 		//如果是已选中的状态
		 	 		if(m.hasClass("active")){
		 	 			m.removeClass("active");
		 	 			if(level>1){
	 	 					m.siblings().fadeIn();
		 	 			}
	 	 				return;
	 	 			}
	 	 			m.addClass("active");
		 	 		m.siblings(".active").removeClass("active");
		 	 		if(level>=2){
		 	 			m.siblings().hide();
		 	 		}
	 	 			if(!m.attr("hasleaf")){
	 	 				searchCategoryProduct.remove();
	 	 				return;
	 	 			}
	 	 			var arr = getCategory(curCateid);
	 	 			if(arr.length==0){
	 	 				if(level==1){
	 	 					searchCategoryProduct.remove();
	 	 				}
	 	 				return;
	 	 			}
		 	 		//系列下面的产品
		 	 		var subCategoryBox = $('<div>').addClass("category-sub-box").attr("for-category",m.attr("cateid"));
	 	 			subCategoryBox.append('<em class="counter"></em>');
	 	 			var subList = $('<div>').addClass("category-sub-list");
					$.each(arr,function(i,item){
							var sub = $('<div>').addClass("category-sub-item").attr({"hasleaf":item.hasleaf,cateid:item.cateid,level:item.level});
						    sub.append('<a href="#">'+item.name+'</a>');
							subList.append(sub);
							
							sub.bind('click',function(){
								clickCategoryItem($(this));
							});
					});
					subCategoryBox.append(subList);
	 	 			searchCategoryProduct.append(subCategoryBox);
		 	 	}
		 	 	
			 	 /*点击搜索按钮*/
			 	 $("#btnSearch").on('click',function(){
			 	 	//关闭菜单
			 	 	$("#searchCategory").data( "mmenu" ).close();
			 	 	//获取当前选中的系列
			 	 	var currentCate =  $(".search-category-item").filter(".active");
			 	 	var category = currentCate.text();
			 	 	$("#cateTitle").text(category);
			 	 	//系列id
			 	 	var cateid = currentCate.attr("cateid");
			 	 	//获取当前选中的属性项
			 	 	var arr = [];
			 	 	$(".search-category-sublist li").filter(".active").each(function(){
			 	 		arr.push($(this).text());
			 	 	});
			 	 	alert(arr.join("|"));
			 	 	
			 	 	//TODO  提交查询参数
			 	 });
			 	 
			 	 
			 })
		</script>
	</body>
</html>
